<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-radio-group v-model="listQuery.companyCandidateType">
        <el-radio-button label="active">在职</el-radio-button>
        <el-radio-button label="all">所有</el-radio-button>
      </el-radio-group>
      <el-select style="width: 400px;" v-model="listQuery.dept_id" placeholder="请选择" clearable>
        <el-option v-for="item in deptOptions" :key="item.id" :label="item.label" :value="item.id">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
    
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
        <!-- <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="$t('table.name')">
              <span>{{ props.row.candidate_name }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('table.name')"  width="100px" >
        <template slot-scope="scope">
          <span class="link-type" @click="handleViewCandidateDesc(scope.row)">
            {{scope.row.candidate_name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="100px">
        <template slot-scope="scope">
          {{scope.row.mobile_phone }}
        </template>
      </el-table-column>
      <el-table-column label="城市"  width="100px">
        <template slot-scope="scope">
          {{scope.row.city | cityValFilter }}
        </template>
      </el-table-column>
      <el-table-column label="职位"  width="100px">
        <template slot-scope="scope">
          {{scope.row.position }}
        </template>
      </el-table-column>
      <el-table-column label="年薪" width="100px">
        <template slot-scope="scope">
          {{scope.row.annual_salary }}
        </template>
      </el-table-column>
      <el-table-column label="当前公司" min-width="200px">
        <template slot-scope="scope">
          {{scope.row.company_name }}
        </template>
      </el-table-column>
      <el-table-column label="当前部门" width="120px">
        <template slot-scope="scope">
          {{scope.row.dept_name }}
        </template>
      </el-table-column>
      <el-table-column label="最新联系时间" width="120px">
        <template slot-scope="scope">
          {{scope.row.newest_contact_time | timeFilter('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column  align="center" :label="$t('table.actions')"  class-name="small-padding fixed-width" width="200px">
        <template slot-scope="scope">
          <el-button @click="handleAddProject(scope.row)">加入项目</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
    <el-pagination background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="current_page" :page-sizes="[10,20,30, 50]" 
      :page-size="listQuery.limit" layout="total, sizes, prev, pager, next" 
      :total="total"
      >
    </el-pagination>
    </div>
    <CandidateProject :data="project_dialog.data" :visible="project_dialog.visible" @closeDialog="handleCloseProjectDialog">
    </CandidateProject>
    <CandidateReport :id="report_dialog.id" :visible="report_dialog.visible" @closeDialog="handleCloseReport">
    </CandidateReport>
  </div>
</template>

<script>
import CandidateReport from '@/views/candidate/components/candidateReport'
import CandidateProject from '@/views/candidate/components/candidateProject'
import API from '@/utils/backend_api'
import _ from 'lodash'
import waves from '@/directive/waves' // 水波纹指令
export default {
  name: 'companyCandidate',
  components: { CandidateReport, CandidateProject },
  props: {
    id: {
      type: String,
      default: '' // 这样可以指定默认的值
    }
  },
  directives: {
    waves
  },
  data() {
    return {
      project_dialog: {
        visible: false,
        data: []
      },
      report_dialog: {
        id: '',
        visible: false
      },
      deptOptions: [],
      company_org: {},
      tableKey: 0,
      list: null,
      total: 0,
      current_page: 1,
      listLoading: false,
      rules: {
      },
      listQuery: {
        page: 1,
        offset: 0,
        limit: 20,
        sort: '-newest_contact_time',
        companyCandidateType: 'active',
        company_id: '',
        dept_id: '',
        dept_name: ''
      }
    }
  },
  filters: {
  },
  created() {
    if (this.id && this.id !== '') {
      this.listQuery.company_id = this.id
      this.getDeptData(this.id)
      this.getList()
    }
  },
  watch: {
    id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (val && val !== '') {
        console.log(val)
        this.listQuery.company_id = val
        this.getDeptData(val)
        this.getList()
      }
    }
  },
  methods: {
    refreshData() {
      this.listQuery = {
        page: 1,
        offset: 0,
        limit: 20,
        sort: '-newest_contact_time',
        companyCandidateType: 'active',
        company_id: this.id,
        dept_id: '',
        dept_name: ''
      }
      this.getDeptData(this.id)
      this.getList()
    },
    handleAddProject(row) {
      this.project_dialog = {
        data: [{ id: row.id, name: row.candidate_name }],
        visible: true
      }
    },
    handleCloseProjectDialog(val) {
      setTimeout(() => {
        this.project_dialog = {
          data: [],
          visible: false
        }
        if (val && val.type === 'project_success' && val.data) {
          // 打开推荐界面
          this.report_dialog = {
            id: val.data.id,
            visible: true
          }
        }
      }, 2000)
    },
    handleCloseReport(val) {
      this.report_dialog = {
        id: '',
        visible: false
      }
    },
    handleViewCandidateDesc(row) {
      if (row && row.id) {
        this.$router.push({
          name: 'candidateDetail',
          params: {
            id: row.id,
            name: row.candidate_name,
            tab: 'origin'
          }
        })
      }
    },
    getDeptNameById(id) {
      let dept_name = ''
      this.deptOptions.map(item => {
        if (item.id === id) {
          dept_name = item.label
        }
      })
      return dept_name
    },
    getDeptData(company_id) {
      this.deptOptions = []
      this.company_org = {}
      API.company_org.get(company_id).then(response => {
        this.company_org = response.data
        if (this.company_org && this.company_org.dept_org) {
          const deptData = JSON.parse(this.company_org.dept_org)
          const parseOrg = function(item) {
            if (item.children && item.children.length > 0) {
              const item_arr = _.flatMapDeep(item.children, parseOrg)
              item_arr.push({ id: item.id, label: item.label })
              return item_arr
            }
            return { id: item.id, label: item.label }
          }
          this.deptOptions = _.flatMapDeep(deptData, parseOrg)
        }
      })
    },
    getList() {
      if (this.listQuery.company_id && this.listQuery.company_id !== '') {
        this.listLoading = true
        if (this.listQuery.dept_id && this.listQuery.dept_id !== '') {
          this.listQuery.dept_name = this.getDeptNameById(this.listQuery.dept_id)
        } else {
          this.listQuery.dept_name = ''
        }
        API.company.candidates(this.listQuery).then(response => {
          this.list = response.data
          if (response.headers && response.headers['x-total-count']) {
            this.total = Number(response.headers['x-total-count'])
          }
          this.listLoading = false
        })
      }
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      if (val >= 1) {
        this.current_page = val
        this.listQuery.offset = (val - 1) * this.listQuery.limit
        this.getList()
      }
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>